<template>
  <el-card class="quests">
    <div slot="header" class="title">任务队列</div>
    <el-table :data="queue" stripe>
      <el-table-column type="expand">
        <template slot-scope="props">
          <quest-info :quest="props.row" :queue="queue"/>
        </template>
      </el-table-column>
      <el-table-column label="任务编号" width="100">
        <template slot-scope="scope">#{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="任务类型" width="110">
        <template slot-scope="scope">{{ types[scope.row.type] }}</template>
      </el-table-column>
      <el-table-column prop="name" label="模型名称" width="150"/>
      <el-table-column prop="desc" label="任务描述"/>
      <el-table-column prop="time" label="创建时间" width="150"/>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="states[scope.row.status].type">{{ states[scope.row.status].name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="320">
        <template slot-scope="scope">
          <div>
            <el-button
              class="big-button"
              size="small"
              @click="$emit('log', scope.row.id)">
              查看日志
            </el-button>
            <el-button
              class="big-button"
              size="small"
              @click="$emit('load', scope.row.id)">
              加载设置
            </el-button>
            <el-button
              v-show="scope.row.status == 0"
              class="big-button"
              size="small"
              type="success"
              @click="command('start', scope.row.id)">
              开始
            </el-button>
            <el-button
              v-show="scope.row.status == 1"
              class="big-button"
              size="small"
              type="warning"
              @click="command('cancel', scope.row.id)">
              取消等待
            </el-button>
            <el-button
              v-show="scope.row.status == 2"
              class="big-button"
              size="small"
              type="danger"
              @click="command('stop', scope.row.id, `是否停止任务 #${scope.row.id} ？`)">
              停止
            </el-button>
            <el-button
              v-show="scope.row.status == 3 && scope.row.type == 4"
              class="big-button"
              size="small"
              @click="$emit('show', scope.row.id)">
              展示结果
            </el-button>
            <el-button
              v-show="scope.row.status == 4"
              class="big-button"
              size="small"
              type="primary"
              @click="command('start', scope.row.id)">
              重新开始
            </el-button>
            <el-button
              class="small-button"
              size="small"
              type="danger"
              :disabled="scope.row.status == 2"
              @click="command('delete', scope.row.id, `是否删除任务 #${scope.row.id} ？`)">
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import QuestInfo from './QuestInfo'

export default {
  components: {
    QuestInfo
  },
  props: {
    queue: Array
  },
  data() {
    return {
      states: [
        { type: 'info', name: '未开始' },
        { type: 'warning', name: '等待中' },
        { type: 'success', name: '进行中' },
        { type: 'primary', name: '已完成' },
        { type: 'danger', name: '已中断' }
      ],
      types: ['训练', '选取攻击目标', '攻击', '防御', '评估']
    }
  },
  methods: {
    command(command, id, confirm) {
      if (confirm) {
        this.$confirm(confirm, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('command', { command, id })
        }).catch(() => {})
      } else {
        this.$emit('command', { command, id })
      }
    }
  }
}
</script>

<style scoped>
.big-button,
.small-button {
  padding: 9px;
}

.big-button {
  width: 70px;
}
</style>
